jQuery — Clone Elements, Left and Right Clicks, and CSS

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.clone()

The .clone() method creates a deep copy of the set of matched elements.

For example, if we have the following HTML:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Then we can get the div with class hello , make a copy of it and append it to the div with class goodbye by writing:

$(".hello").clone().appendTo(".goodbye");

.closest()

The .closest() method gets the closest element with the given selector.

For example, if we have the following HTML:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

We get the ul that’s closest to the element with the class item-a by writing:

$("li.item-a")
  .closest("ul")
  .css("background-color", "red");

We get both the ul with class level-2 and the ul with class level-3 and add a red background to them.

:contains() Selector

We can use the :contains selector to match elements with the given text.

For example, if we have:

<div>John Smith</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

Then we get all the divs with text 'John' in it and apply styles to it by writing:

$("div:contains('John')").css("text-decoration", "underline");

We add underline to all the divs with text 'John' in it.

So the 1st and 3rd div will have the underline.

.contents()

The .contents() method gives us the content of the element.

For example, if we have:

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <br><br>
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
  <br><br>
  Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur.
</div>

Then we get the text nodes by writing:

const els = $(".container")
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  })
console.log(els);

nodeType with value 3 is the text nodes.

.contextmenu()

We can bind to the contextmenu event with the .contextmenu() method.

For example, if we have the given HTML:

<div id="target">
  Right-click here
</div>

Then we can listen to right-clicks by writing:

$("#target").contextmenu(function() {
  alert("Handler for .contextmenu() called.");
});

When we right-click the div, then we see the alert displayed.

.css()

We can also use it to get the value of computed styles with the css method lets us set styles for the select elements.

For example, if we have the following HTML:

<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>

And the following CSS:

div {
   width: 60px;
   height: 60px;
   margin: 5px;
   float: left;
}

Then we can listen to clicks and get the style when we click on the div by wiring:

$("div").click(function() {
  const color = $(this).css("background-color");
  console.log(color)
});

We get the background-color property’s value with this.

Also, we can get multiple styles by writing:

$("div").click(function() {
  const styles = $(this).css([
    "width", "height", "color", "background-color"
  ]);
  console.log(styles)
});

We just pass in an array with the property names.

Conclusion

We can clone elements, listen to left and right clicks, and get styles with jQuery.